<template>
  <div class="page has-navbar has-tabbar" v-tabbar-menu-index="0">
    <von-header theme="light">
      <span slot="title">首页</span>
    </von-header>

    <div class="page-content padding-top">
   
      <swiper ref="swiper" 
        direction="horizontal" 
        style="width:100%;height:50vw"
        pager-color="#ea5a49" 
        pager-bg-color="#e5e4e3"
        hide-pager="false"
        v-if="rotation"
      >
        <swiper-item v-for="item in rotation">
          <div v-bind:style="{backgroundImage:'url('+imgUrl + item.rotationImage+'.r_1000xh_500)'}"></div>
        </swiper-item>
      </swiper>

      <div class="weui-flex center-btn-box">
      	<div class="weui-flex-item center-btn">
          <!-- <router-link to="/iframe_wx"> -->
          <a @click="onekeyFn">
            <i><img width="50" height="50" src="static/icon/ic_car_put_storage2.svg" ></i>
            <p>一键发车</p>
          </a>
          <!-- </router-link> -->
        </div>
        <div class="weui-flex-item center-btn">
          <!-- <router-link to="/iframe_wx"> -->
          <a v-bind:href="baseUrl+'/mshop/src/home.html?marketId='+(session.marketId || '')+'&shopId='+(session.shopId || '')+'&imgUrl='+imgUrl">
            <i><img src="static/images/icon_wxshop.svg"></i>
            <p>微店预览</p>
          </a>
          <!-- </router-link> -->
        </div>
        <div class="weui-flex-item center-btn">
          <!-- <router-link to="iframe_che300"> -->
          <a href="http://m.che300.com/pinggu">
            <i><img src="static/images/icon_appr.svg"></i>
            <p>车辆估值</p>
          </a>
          <!-- </router-link> -->
        </div>
        <div class="weui-flex-item center-btn">
          <!-- <router-link to="iframe_che300"> -->
          <router-link to="/statistics">
            <i><img width="50" height="50" src="static/icon/ic_statictis2.svg"></i>
            <p>数据统计</p>
          </router-link>
          <!-- </router-link> -->
        </div>
      </div>
      <router-link  :to="'/notice/'+notice.noticeId">
        <item class="item-icon-right item-notice">
          公告：{{notice.noticeTitle}}
          <i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
        </item>
      </router-link>
      <div class="cars-box">
      	<div v-if="templateList.length>0">
	      	<div class="car-editor-title">
						订阅车源
						<span style="float: right;color: #FF6816;"><router-link to="/car_cars_template">更多>></router-link></span>
					</div>
					<car-options :carsList="templateList"></car-options>
				</div>
				<div class="car-editor-title">
					推荐车源
					<span style="float: right;color: #FF6816;"><router-link to="/cars">更多>></router-link></span>
				</div>
        <car-options :carsList="carsList"></car-options>
        
      </div>
  		

    </div>
    <img :src="value" alt="" />
     <input type="file" ref="fileImg" @change="fileFn" accept="image/*" class="none"  style="cursor: pointer;" />
  </div>
</template>
<script>
  export default {
    data(){
      return {
        notice:{
          noticeTitle:'启辕汽车',
        },
        carsList:[],
        imgUrl:imgUrl,
        baseUrl:baseUrl,
        session:sess.get('userSession'),
        pageNo:0,
        rotation:false,
        templateList:[],
        getInterface:'',
        carVin:'',
        value:'',
      }
    },
    created(){
    	this.getCarListByCarSelectTemplate()
    	this.onRefresh()
      var _this = this;
      axios.get(baseUrl+'/controller/getRotationList',{params:{
          marketId:this.session.marketId,
        }
      }).then(function(res){
        _this.rotation = res.data.result;
      });
      axios.get(baseUrl+'/controller/getNoticeList',{params:{
          marketId:this.session.marketId,
          noticeState:1,
        }
      }).then(function(res){
        if(res.data.result.length>0){
          _this.notice = res.data.result[0].notice;
        }
      })
       
    },
    computed:{
    	userSession(){
    		return sess.get('userSession')
    	}
    },
    methods: {
    	getCarListByCarSelectTemplate(){
    		axios.get(baseUrl+'/controller/car/getCarListByCarSelectTemplate',{params:{
    			carSaleState: 20,
    			marketId:sess.get('userSession').marketId||1,
    			shopId:sess.get('userSession').shopId,
    			pageIndex:1,
    			pageSize:5,
    		}}).then((res)=>{
    			console.log(res)
    			res.data && res.data.result && (this.templateList = res.data.result)
    		})
    	},
      onRefresh() {
        var _this = this;
        axios.get(baseUrl+'/controller/getCarList',{params:{
        			carSaleState: 20,
              pageIndex:1,
              pageSize:5,
              marketId:1,
              carSaleState:20,
            }
         })
        .then(function(res){
          _this.carsList = res.data.result;
          
        })
      
      },
      fileFn(){
      	var _this = this
      	var reader = new FileReader();
				reader.readAsDataURL(this.$refs.fileImg.files[0])
				reader.onloadend = function(){
					_this.value = reader.result
					_this.filePost(reader.result.match(/,(\S*)/)[1])
					
				}
//    	let formData = new FormData()
//		formData.append('uploadFile',this.$refs.fileImg.files[0])
//		window.axios.post(baseUrl+'/controller/upload/uploadFile',formData).then(res=>{
//			if(res){
//				let urls = imgUrl+res.data.result.pathUrl
//				this.filePost(urls)
//			}
//		})
		
      },
      filePost(Url){
      	let instance = axios.create({      			headers:{
      			'Authorization':'DP92m1bWVrMOm/xAZjfZQqQIhpxhPTEwMTI1NDE4Jms9QUtJRHBZQm1EVGY4YTlkdzQwNHJmSnJzbVdDNE5XVU1iOW9JJmU9MTUyODk1NTg2NCZ0PTE1MjYzNjM4NjMmcj0zODE5NDY0MDUxJnU9NjIzNjMwMzAy',
      			'content-type':'text/json'
      	},
        });
      	$loading.show('拼命加载中..');
			if(this.getInterface=='generalocr'){
				
				instance({
		            method: 'post',
		            url: 'https://api.youtu.qq.com/youtu/ocrapi/'+this.getInterface,
		            data: {
		            	
		            	"app_id":"10125418",
		            	"image":Url
		            }
		        }).then(res => {
		        	$loading.hide();
		        	this.$refs.fileImg.value = '' 
		        	if(res){
		        		res.data.items.map(item=>{if(item.itemstring.replace(/\s+/g, "").length==17){this.carVin = item.itemstring.replace(/\s+/g, "")}})
		        		this.gotoOnekeyFn()
		        	
				 	}
				}).catch(err=>{					
					$loading.hide();
					this.$refs.fileImg.value = '' 
					setTimeout(()=>{
						$toast.show('服务器繁忙,请稍后再试',2000);
					},400)
					
				})
			}else{
				instance({
		            method: 'post',
		            url: 'https://api.youtu.qq.com/youtu/ocrapi/'+this.getInterface,
		            data: {
		            	"type":0,
		            	"app_id":"10125418",
		            	"image":Url
		            }
		        }).then(res => {
		        	$loading.hide();
		        	this.$refs.fileImg.value = '' 
		        	if(res){
		        		res.data.items.map(item=>{if(item.itemstring.replace(/\s+/g, "").length==17){this.carVin = item.itemstring.replace(/\s+/g, "")}})
		        		this.gotoOnekeyFn()
				 	}
				}).catch(err=>{
					$loading.hide();
					this.$refs.fileImg.value = '' 
					setTimeout(()=>{
						$toast.show('服务器繁忙,请稍后再试',2000);
					},400)
					
				})
			}
			
      },
      gotoOnekeyFn(){
      	$dialog.confirm({
					// 标题					
					title: '提示',
					content: '是否以('+this.carVin+')车架号发车',
					// 取消按钮文本
					cancelText: '取消',
					// 确定按钮文本
					okText: '确定'
				}).then((res) => {
					if(res){
						this.$router.push({path:'/add_step1',query:{carVin:this.carVin}})
					}else{
						return
					}
				})
      },
      onekeyFn(){
      	let options = {
          effect: 'scale',
          title: '',
          buttons: [
            {text: 'VIN码拍照'},
            {text: '行驶证拍照'},
          ],
          showClose:true,
        }
      	let popup = $popup.fromTemplate('<p style="margin-bottom: 0; text-align: center;">请选择拍照方式</p>', options)
      	popup.show().then((buttonIndex) => {
          if(buttonIndex===1){
          	this.getInterface = 'driverlicenseocr'
          }else if(buttonIndex===0){
          	this.getInterface = 'generalocr'
          }else{
          	return 
          }
          let u = navigator.userAgent, app = navigator.appVersion; 
					if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1){
						this.$refs['fileImg'].click()
					}else{
						this.$refs['fileImg'].click()
						this.$refs['fileImg'].click()
					}
        })
      }

      
    }
  }
</script>
<style scoped>
  .center-btn{
    text-align: center;
  }
  .center-btn i{
    width: 50px;
    height: 50px;
    display: inline-block;
  }
  .center-btn-box{
    padding: 10px 20px;
    background-color: #fff;
  }
  .center-btn p{
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #666;
    margin-bottom: 0;
  }
  
  
  
</style>
















